<script setup lang="ts">
import {ElPopover,ElButton} from "element-plus";
import {devViewExamplesProps} from "./viewExamples";

const props = defineProps(devViewExamplesProps);
// 定义组件名称
defineOptions({
  name: 'DevViewExamples',
  inheritAttrs: false
});
</script>

<template>
  <div class="dev-view-examples">
    <slot name="describe">
      <span :style="props.describeStyle">{{ props.describe }}</span>
    </slot>
    <el-popover
        :trigger="props.trigger"
        :width="props.popoverStyle"
    >
      <template #default>
        <img :style="props.imageStyle || props.popoverStyle" :src="props.imgUrl">
      </template>
      <template #reference>
        <slot>
          <el-button :link="props.buttonLink" :type="props.buttonType">{{ props.buttonText }}</el-button>
        </slot>
      </template>
    </el-popover>
  </div>
</template>

<style scoped lang="scss">
.dev-view-examples {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>
